@import "../../../styles/base";

.HonorRank-rule {
  color: white;
  padding-top: tovw(600);
  background: #00005E url("./../images/banner.png") top center / 100% no-repeat;
  min-height: 100vh;
  position: relative;

  .return-btn {
    font-size: tovw(24);
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 500;
    width: tovw(110);
    height: tovw(64);
    background: linear-gradient(270deg, #3E55E2 2%, #4CD9FF 98%), #3E55E2;
    box-shadow: 0 tovw(2) 0 0 rgba(6, 139, 255, 1);
    border-radius: tovw(100) 0 0 tovw(100);
    border: tovw(1) solid rgba(118, 255, 254, 1);
    position: absolute;
    top: tovw(514);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rule-btn {
    font-size: tovw(24);
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
    width: tovw(120);
    height: tovw(64);
    background-color: #D03EE2;
    background-image: linear-gradient(270deg, #D03EE2 2%, #FF4CE8 100%);
    box-shadow: 0 tovw(2) 0 0 rgba(191, 6, 255, 1);
    border-radius: tovw(32) 0 0 tovw(32);
    position: absolute;
    top: tovw(163);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rule {
    min-height: 60vw;

    .rule-item {
      width: 100%;
      padding: 0 tovw(15) tovw(30);

      img {
        width: 100%;
      }
    }
  }

  .info {
    text-align: center;
    font-size: tovw(22);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0;
    font-weight: 700;
    padding-bottom: tovw(30);
  }
}
